<!-- 应用风格设置 -->
<template>
    <el-dialog
        v-model="showDialog"
        title="页面风格设置"
        width="550px"
        append-to-body
        destroy-on-close
    >
        <el-scrollbar>
            <el-alert title="温馨提示：统一设置组件风格后，相对应的组件将全部改为设置色，并可单独修改。" type="info" :closable="false" />
            <div class="content-wrap">
                <div class="content-title">对可统一设置组件设置风格</div>
                <div class="content-main">
                    <color-picker
                        v-model="config.button"
                        label="按钮"
                        show-alpha
                        class="btn-wrap"
                    />

                    <color-picker
                        v-model="config['title-ele']"
                        label="标题"
                        show-alpha
                        class="btn-wrap"
                    />

                    <color-picker
                        v-model="config.breakline"
                        label="分割线"
                        show-alpha
                        class="btn-wrap"
                    />
                </div>
            </div>

            <el-divider />
            <div class="content-wrap">
                <div class="content-title">对可统一设置页面设置风格</div>
                <div class="content-main">
                    <color-picker
                        v-model="config.navigationBarBackgroundColor"
                        label="顶部导航背景"
                        show-alpha
                        class="btn-wrap"
                    />

                    <color-picker
                        v-model="config.navigationBarTextStyle"
                        label="顶部导航文字"
                        show-alpha
                        class="btn-wrap"
                    />

                    <!-- <color-picker
                        v-model="config.windowBackgroundColor"
                        label="下拉加载背景"
                        show-alpha
                        class="btn-wrap"
                    /> -->
                </div>
            </div>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">保存修改</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useEditStore } from '@/store'
import { deepClone } from '@/libs/tools'
import useBaseStyle from '@/libs/edit/baseStyle'
import ColorPicker from '@/components/color-picker'
export default defineComponent({
    name: 'AppThemeSetting',
    components: {
        ColorPicker
    },
    setup() {
        const editStore = useEditStore()

        const showDialog = ref(false)
        const config = ref({})

        const appData = computed(() => editStore.appData)
        const baseStyle = computed({
            get: () => editStore.style,
            set: val => editStore.style = val
        })

        const {
            onSetWidgetBaseStyle,
            onSetPageBaseStyle
        } = useBaseStyle(baseStyle.value)

        const show = () => {
            showDialog.value = true
            config.value = deepClone(baseStyle.value)
        }

        const onCancel = () => {
            // config.value = {}
            showDialog.value = false
        }
        const onConfirm = () => {
            Object.assign(baseStyle.value, config.value)
            // 对全局样式进行修改
            Object.values(appData.value).forEach(pageData => {
                if (!!pageData?.hasOwnProperty('eles')) {
                    onSetPageBaseStyle(pageData)
                }
            })
            showDialog.value = false
        }

        return {
            showDialog,
            config,

            show,
            onCancel,
            onConfirm
        }
    }
})
</script>

<style lang="less" scoped>
.content-wrap {
    margin-top: 10px;
    .content-title {
        // line-height: 50px;
    }
    .content-main {
        margin-top: 15px;
        .btn-wrap {
            & + .btn-wrap {
                margin-left: 20px;
            }
        }
    }
}
</style>